<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现拖拽和拉伸</title>
</head>
<body>
<div id="test" style="position:absolute;left:0;top:0;width:400px;height:400px; border:1px solid #adadad; background: red;">
</div>
<script>
    var clickBox = document.getElementById('test');
    /*当在当前元素上按下鼠标时，就触发拖动和拉伸操作
     */
    clickBox.onmousedown = function(e){
        e=e||event;  //兼容ie和其他浏览器的写法
        var mouseDownX = e.clientX;
        var mouseDownY = e.clientY;
        var clickBoxLeft = clickBox.offsetLeft;
        var clickBoxTop = clickBox.offsetTop;
        var clickBoxWeight = clickBox.offsetWidth;
        var clickBoxHeight = clickBox.offsetHeight;
 
        var direction = 0;
        if (mouseDownX<clickBoxLeft+30) {
            direction='left';
        } else if (mouseDownX >clickBoxLeft+clickBoxWeight - 30){
            direction='right';
        }
 
        if (mouseDownY<clickBoxTop+30){
            direction = 'top';
        } else if (direction < clickBoxTop + clickBoxHeight - 30) {
            direction = 'bottom';
        }
        if ((clickBoxLeft + clickBoxWeight-30)< mouseDownX&&mouseDownX< (clickBoxLeft + clickBoxWeight) && (clickBoxTop+clickBoxHeight-30)<mouseDownY&& mouseDownY<(clickBoxTop+clickBoxHeight)) {
            direction = 'rightBottomCorner';
        }else if((clickBoxLeft +30)< mouseDownX&&mouseDownX< (clickBoxLeft + clickBoxWeight-30) && (clickBoxTop+30)<mouseDownY&& mouseDownY<(clickBoxTop+clickBoxHeight-30)){     //如果是在中间位置，则实现拖动功能
            direction="drag";
        }
 
        /**
         *desc:当鼠标开始华东的时候，根据鼠标的移动方向去调整他的X，Y坐标和长宽
         */
        document.onmousemove = function(e) {
            e = e || event; //提供的e回调参数，存储的信息
            var xx = e.clientX;
            var yy = e.clientY;
            if (direction==='left') {
                clickBox.style.width = clickBoxWeight + mouseDownX - xx + 'px'
                clickBox.style.left = xx + 'px';
            } else if (direction==='right') {
                clickBox.style.width = clickBoxWeight + xx - mouseDownX + 'px'
            }
 
            if (direction==='top'){
                clickBox.style.height = clickBoxHeight + mouseDownY - yy + 'px';
                clickBox.style.top = yy + 'px';
            } else if (direction==='bottom'){
                clickBox.style.height = clickBoxHeight + yy - mouseDownY + 'px';
            }
            if (direction==='rightBottomCorner'){
                clickBox.style.width = clickBoxWeight +xx-mouseDownX+'px'
                clickBox.style.left =clickBoxLeft+'px';
                clickBox.style.height = clickBoxHeight +yy-mouseDownY+'px';
                clickBox.style.top =clickBoxTop+'px';
            }else if(direction==="drag"){
                clickBox.style.left =xx-mouseDownX+clickBoxLeft+ 'px';
                clickBox.style.top =yy-mouseDownY+clickBoxTop+ 'px';
            }
            //return false; //这里为了避免抖动
        };
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        if (e.preventDefault){
            e.preventDefault();
        }
    };
</script>
</body>
</html>